<!-- 
@name: 商户列表
-->
<template>
	<div id="moreVendorList" class="page">
		<!-- <div class="searchWrap">
			<form action="/">
				<van-search v-model="searchValue" placeholder="搜索商品" @search="onSearch" />
			</form>
		</div> -->
		<div class="content-wrap">

			<div class="diy-area">
				<div class="like">
					<div class="type2" ref='type2Scorll' id='type2Scorll'>
						<van-list v-model="loading" offset='10' :finished="finished" finished-text="没有更多了" @load="onLoad">
							<div class="item " @click="$router.push({path: '/vendor/detail',query: { pkey: item.pkey },})" v-for="(item, goodsIndex) in orderList" :key="goodsIndex">
								<div class="flex-row">
									<img object-fit="fill" class="icon1" :src="item.photo[0] || ''"></img>
									<div class="flex-column ">
										<div class="text3">{{item.name}}</div>
										<div class="flex-row flex-alignCenter">
											<van-rate readonly v-model="value" allow-half :icon="$store.state.rateIcon" :void-icon="$store.state.rateIcon2" />
											<div style="color:#D95954;margin-left:0.1rem">3.0</div>
										</div>
										<div class="flex-row flex-alignCenter">
											<van-icon name="location" color='#999999' />
											<div class="text4" style="margin-right:0.1rem">200m</div>
											<div class="text4">{{item.addr}}</div>
										</div>
									</div>
									<div class="flex-row">
										<div @click="openLocation(item)" class="flex-column flex-center" style="margin-right: 0.4rem;margin-left:0.2rem">
											<img object-fit="fill" class="icon2" src='@/assets/images/dh.png'></img>
											<div>导航</div>
										</div>
										<div class="flex-column flex-center" @click="handlePhone(item)">
											<img object-fit="fill" class="icon3" src='@/assets/images/phone.png'></img>
											<div>电话</div>
										</div>
									</div>
								</div>
							</div>
						</van-list>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'app',
	components: {},
	data() {
		return {
			searchValue: '',
			searchTypeIndex: '',
			value: 2.5,
			rateIcon:
				'https://filetest.xinanshizu.com/file/v2/image?file=4235.png&code=00D96F02428C3AD8E53A3A6724AEC38C',
			rateIcon2:
				'https://filetest.xinanshizu.com/file/v2/image?file=4236.png&code=C993979E415E6C8ED7784EFD6C0AEAFE',

			getGtypeList: [
				{
					name: '待付款',
					value: 'INIT',
				},
				{
					name: '待使用',
					value: 'PAID',
				},
				{
					name: '待评价',
					value: 'WRITTEN_OFF',
				},
				{
					name: '已完成',
					value: 'COMPLETED',
				},
				{
					name: '退款/售后',
					value: 'REFUND',
				},
			],
			searchTypeList: [
				{ value: '销量最高', pkey: 'XS' },
				{ value: '距离最近', pkey: 'NEAR' },
				{ value: '评分最高', pkey: 'RATE' },
			],
			searchData: {
				page: 0,
				pagesize: 5,
				lat: this.$store.state.lat,
				lng: this.$store.state.lng,
				queryType: '', //:INIT,PAID,WRITTEN_OFF,COMPLETED,REFUND
			},
			orderList: [],
			activeName: '',
			loading: false,
			finished: false,
			queryVendorList: [],
		};
	},

	created() {
		// this.getGtype_goods();
		this.searchData.queryType = this.$route.query.status;
		console.log(this.searchData.queryType);
	},
	methods: {
		onLoad() {
			console.log('触底');
			this.getData();
		},
		/**
		 * 打电话
		 */
		handlePhone(item) {
			if (item.mobile) {
				item.mobile = item.mobile.replace(' ', '');
				console.log(item.mobile.replace(' ', '').length);
				this.$dialog
					.confirm({
						title: '是否拨打以下电话',
						message: item.mobile,
					})
					.then(() => {
						window.location.href = `tel://${item.mobile}`;
					})
					.catch(() => {});
			} else {
				this.$dialog
					.confirm({
						title: '提示',
						message: '商家未留有客服电话',
					})
					.then(() => {})
					.catch(() => {});
			}
		},
		getGtype_goods() {
			this.$myApi.getGtype_goods().then((res) => {
				if (res.code == 0) {
					this.getGtypeList = res.result;
				} else {
				}
			});
		},

		getData(finished) {
			// finished 避免清空列表出发刷新
			var params = this.searchData;
			params.pkey = this.$route.query.pkey;
			this.$myApi.queryVendor_goods(params).then((res) => {
				if (res.code == 0) {
					this.orderList = [...this.orderList, ...res.result.content];
					this.loading = false;
					this.searchData.page++;
					if (finished) {
						this.finished = false;
					}
					if (res.result.content.length < 5) {
						this.finished = true;
					}
				} else {
				}
			});
		},
		clearSearch() {
			this.orderList = [];
			this.searchData.page = 0;
			this.searchData.pagesize = 5;
			this.finished = false;
		},
		onSearch(e) {
			console.log(e);
			this.clearSearch();
			this.searchData.title = e;
			this.finished = true;
			this.getData(true);
		},
		onCancel() {},
	},
};
</script>
<style lang="less" scoped>
#moreVendorList {
	padding-left: 0rem;
	padding-right: 0rem;
	padding-bottom: 0;
	min-height: 100vh;
	background-color: #fafafa;

	.van-swipe__indicators {
		bottom: 25px;
	}
	.van-search__content {
		border-radius: 20px;
	}
	.searchWrap {
		width: 100%;
	}
	.searchHistory {
		padding: 0.25rem;
		background-color: #fff;
		img {
			height: 0.28rem;
			width: 0.32rem;
		}
		.text1 {
			font-size: 0.28rem;
			font-weight: bold;
			color: #333333;
			margin-bottom: 0.2rem;
		}
		.text2 {
			background: #f5f5f5;
			border-radius: 5px;
			padding: 0.16rem 0.3rem;
			margin-right: 0.12rem;
			margin-bottom: 0.12rem;
			white-space: nowrap;
			display: inline-block;
			font-size: 0.24rem;
			color: #666666;
		}
		.text3 {
			.text2();
			color: #999999;
		}
	}
	.content-wrap {
		width: 100%;
		height: auto;
		.diy-area {
			// background-color: #fff;
			position: relative;
			background-color: inherit;

			img {
				vertical-align: top;
			}

			.banner {
				.bannerImg {
					height: 4rem;
					width: 100%;
				}
			}
			.br {
				height: 0.2rem;
				width: 100%;
				background: #fafafa;
			}
			.likeTitle {
				font-size: 0.32rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				margin-bottom: 0.24rem;
				text-align: center;
			}
			.like {
				padding: 0.25rem;
				height: calc(100vh - 46px);
				// max-height: 200px;
				position: relative;
				box-sizing: border-box;
				border-radius: 10px;
				.buttons {
					padding-top: 0.24rem;
					border-top: 1px solid #ededed;
					width: 100%;
					margin-top: 0.32rem;
				}
				.button {
					background: #ffce17;
					border-radius: 20px;
					font-size: 0.26rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333;
					padding: 0.15rem 0.44rem;
					height: auto;
					height: auto;
					margin-left: 0.16rem;
				}
				.button2 {
					border-radius: 20px;
					font-size: 0.26rem;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333;
					padding: 0.15rem 0.44rem;
					margin-left: 0.16rem;
				}
				.type2 {
					width: 100%;
					overflow-x: scroll;
					height: 100%;
					// height: 11rem;
					// padding-bottom: 1rem;
					// .photo {
					// 	height: 1.2rem;
					// 	width: 1.2rem;
					// 	margin-right: 0.24rem;
					// 	border-radius: 10px;
					// }
					.item {
						margin-bottom: 8px;
						background: #fff;
						padding: 0.24rem;
						border-radius: 10px;

						.text1 {
							font-size: 0.32rem;
							color: #333333;
							font-weight: 800;
							margin-bottom: 0.24rem;
						}
						.text2 {
							font-size: 0.26rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
						}
						width: 100%;
						overflow-x: scroll;
						.icon1 {
							height: 1.14rem;
							width: 1.14rem;
							border-radius: 10px;
							margin-right: 0.24rem;
						}
						.icon2 {
							width: 0.32rem;
							height: 0.32rem;
							margin-bottom: 0.12rem;
						}
						.icon3 {
							width: 0.24rem;
							height: 0.3rem;
							margin-bottom: 0.12rem;
						}
						.text3 {
							font-size: 0.3rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: #000000;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
							width: 3.3rem;
							// margin-bottom: 0.1rem;
						}
						.text4 {
							font-size: 0.24rem;
							font-family: PingFang SC;
							font-weight: bold;
							color: #999999;
						}
					}
				}
			}
			.iconWrap {
				position: relative;
				padding-bottom: 0.55rem;
				border-radius: 20px 20px 0 0;
				top: -0.3rem;
				// margin-top: -0.4rem;
				background-color: #fafafa;
				z-index: 999;
				display: grid;
				grid-template-columns: repeat(4, 25%);
				.iconImg {
					width: 0.8rem;
					height: 0.8rem;
					margin-bottom: 0.12rem;
				}
				.item {
					-webkit-box-flex: 1;
					flex: 1;
					margin-top: 0.3rem;
					font-size: 0.24rem;
					text-align: center;
				}
			}
		}
	}
}
</style>
<style lang="less" scoped>
/deep/.van-tabs__nav--line.van-tabs__nav--complete {
	background: #f8f8f8;
}
/deep/.van-search .van-cell {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	font-size: 0.28rem;
}
/deep/.van-tab {
	// flex: 0 1 auto;
	// width: 1rem;
	font-size: 0.3rem;
}
/deep/.van-tab--active {
	font-weight: bold;
	font-size: 0.32rem;
}
</style>